import { observer, useLocalObservable } from 'mobx-react'
import styles from './index.module.less'
import hand from '@/resource/myChart/hand.png'
import React, { useState, useEffect } from 'react'
import share from '@/resource/myChart/share.png'
import ellipse from '@/resource/myChart/ellipse.png'
import { history, useLocation } from 'umi'
import ShowModal from '@/pages/level/components/ShowModal'
import Store from './store'
import glod from '@/resource/careerEdit/jinbi.png'
import { postData } from '@/servers/http'

export default observer(() => {
    const store = useLocalObservable(() => Store)
    const { id } = useLocation().query
    useEffect(() => {
        store.getBarriersData(id)
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])
    const [activeTab, setActiveTab] = useState(0)
    const [value, setValue] = useState(false)
    //任务完成
    const taskFinish = () => {
        postData(`/user-barriers/batch-input/${id}`, { data: store.barriersList }).then((res: any) => {
            // setValue(res.data.scene_id)
            // console.log('任务完成')
            history.push(`/level?id=${res.data.scene_id}`)
        })
    }
    //五指图职业定位样式
    const showName: Record<number, string> = {
        0: styles.thumb,
        1: styles.index_finger,
        2: styles.middle_finger,
        3: styles.ring_finger,
        4: styles.little_finger,
    }

    return (
        <div className={value ? styles.page_modal : styles.page}>
            {value ? (
                <ShowModal name={'关卡："我的五指图"'} type={0} imgUrl={glod} id={value} visible={!!value} setVisible={setValue} />
            ) : (
                <div>
                    <div className={styles.top_view}>
                        <img src={share} />
                        <img className={styles.hand_img} src={hand} />
                        {store.barriersList.map((item, index: number) => {
                            return (
                                <div className={showName[index]} key={`${item.name}_${index}`}>
                                    <div className={activeTab === index ? styles.checked : styles.default} onClick={() => setActiveTab(index)}>
                                        {item.name}
                                    </div>
                                </div>
                            )
                        })}

                        <div className={styles.my_chart}>我的五指图</div>
                        <div className={styles.aperture} />
                    </div>
                    <div className={styles.feature}>
                        <div className={styles.title}>
                            <img src={ellipse} />
                            <span>{`${store?.barriersList[activeTab]?.name}:`}</span>
                        </div>
                        <div className={styles.content}>
                            <span>{`${store?.barriersList[activeTab]?.feature}`}</span>
                        </div>
                    </div>
                    <div className={styles.footer} onClick={taskFinish}>
                        <span>任务完成</span>
                    </div>
                </div>
            )}
        </div>
    )
})
